<template>
  <el-drawer
    :title="t('organization.organizationInfo')"
    :model-value="state.dialogFormVisible"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
    :destroy-on-close="true"
  >
    <template #default>
      <el-descriptions :column="2" :border="true">
        <el-descriptions-item
          :label="t('organization.orgFullName')"
          label-align="right"
          :span="2"
          >{{ formView.orgFullName }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('organization.orgName')"
          label-align="right"
          :span="2"
          >{{ formView.orgName }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('organization.orgCode')"
          label-align="right"
          width="10%"
        >
          {{ formView.orgCode }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('organization.levelCode')"
          label-align="right"
          width="10%"
        >
          {{ formView.levelCode }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="上级机构" label-align="right" :span="2">
          {{ formView.parentId }}
        </el-descriptions-item> -->
        <el-descriptions-item
          :label="t('organization.societyCode')"
          label-align="right"
        >
          {{ formView.societyCode }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('organization.telephone')"
          label-align="right"
        >
          {{ formView.telephone }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('organization.category')"
          label-align="right"
        >
          <el-tag size="small" v-if="formView.category == 'UNIT'">
            {{ t("organization.categoryUnit") }}</el-tag
          >
          <el-tag size="small" v-if="formView.category == 'DEPT'">
            {{ t("organization.categoryDept") }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('organization.status')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small" v-if="formView.status == 1">
            {{ t("common.statusEnabled") }}</el-tag
          >
          <el-tag size="small" v-if="formView.status == 0" type="danger">
            {{ t("common.statusDisabled") }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('organization.description')"
          label-align="right"
          :span="2"
        >
          {{ formView.description }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../utils/utils";
import apiOrganization from "../api/organization";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    title?: string;
  }>(),
  {}
);

const formViewOriginal = () => {
  return {
    orgId: "",
    parentId: "",
    orgName: "",
    orgFullName: "",
    orgCode: "",
    levelCode: "",
    societyCode: "",
    category: "",
    telephone: "",
    status: 0,
    description: "",
  };
};
const formView = reactive(formViewOriginal());

const state = reactive({
  dialogFormVisible: false,
});

const handleClose = (submit: boolean) => {
  state.dialogFormVisible = false;
};

const show = (row: any) => {
  // console.log(row);
  Object.assign(formView, formViewOriginal());

  apiOrganization
    .getOrganization(row.orgId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, response.data.data);
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
